<template>
	<div>
		<el-row>
			<el-col :span="4">
					<el-button type="primary" size="small" v-on:click='exInsuranceQuery'>查询</el-button>	
				<el-button type="primary" size="small" v-on:click='exInsuranceAdd'>新增</el-button>
				<el-button type="primary" size="small" v-on:click='msgEdit'>编辑</el-button>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="1" class='labelCol'>
				<p class="labelText">查询类型:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" style="width: 100%;" v-model="condition.select.key" placeholder="请选择类型" clearable>
					<el-option label="车牌号" value="1"></el-option>
					<el-option label="VIN" value="2"></el-option>
					<el-option label="联系人姓名" value="3"></el-option>
					<el-option label="联系人电话" value="4"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" class='labelCol'>
				<p class="labelText">查询内容:</p>
			</el-col>
			<el-col :span="4">
				<el-input placeholder="请输入查询内容" style="width:95%;" v-model="condition.select.value" size="small">
				</el-input>
			</el-col>
			<el-col :span="1" class='labelCol'>
				<p class="labelText">选择车系:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" style="width:100%;" v-model="condition.series" multiple placeholder="请选择车系" clearable>
					<el-option v-for="item in seriesComboData" :label="item.label" :value="item.value"></el-option>
					<el-option label='其它品牌' value='QT'></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" class='labelCol'>
				<p class="labelText">选择车龄:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" style="width: 100%;" v-model="condition.carAge" multiple placeholder="请选择车龄" clearable>
					<el-option v-for="item in carAgeCombo" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
		</el-row>
		<el-row >
			<el-col :span="1" class='labelCol'>
				<p class="labelText">延保状态:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" style="width: 100%;" v-model="condition.status" placeholder="请选择状态" clearable>
					<el-option v-for="item in statusComboData" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" class='labelCol'>
				<p class="labelText">延保类型:</p>
			</el-col>
			<el-col :span="4">
				<el-select size="small" style="width: 100%;margin-left:0px;" v-model="condition.type" placeholder="请选择类型" clearable>
					<el-option v-for="item in typeCombo" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-col>
			<el-col :span="1" class='labelCol'>
				<p class="labelText">开始日期:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker size="small" style="width: 95%;" v-model="condition.time.startTime" format="yyyy-MM-dd" :editable=false type="date" placeholder="起始日期">
				</el-date-picker>
			</el-col>
			<el-col :span="1" class='labelCol'>
				<p class="labelText">结束日期:</p>
			</el-col>
			<el-col :span="4">
				<el-date-picker size="small" style="width: 95%;" v-model="condition.time.stopTime" format="yyyy-MM-dd" :editable=false type="date" placeholder="结束日期">
				</el-date-picker>
			</el-col>
		</el-row>
			
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData.dataList" stripe border style="width: 100%" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55">
					</el-table-column>

					<!--	作者：1813180149@qq.com
																																														时间：2017-02-20
																																														描述：延保
																																												-->
					<el-table-column prop="vin" label="车架号" width="240" fixed>
					</el-table-column>
					<el-table-column prop="ownerName" label="车主" width="260" fixed>
					</el-table-column>
					<el-table-column prop="plateNum" label="车牌号" width="110" fixed>
					</el-table-column>
					<el-table-column prop="restartInsurance" label="开始日期" :formatter="formatStartTime" width="120" fixed>
					</el-table-column>
					<el-table-column prop="restopInsurance" label="结束日期" :formatter="formatEndTime" width="120" fixed align="center">
					</el-table-column>
					<el-table-column prop="carAge" label="车龄" width="70" align="right">
					</el-table-column>
					<el-table-column prop="seriesName" label="车型" width="120">
					</el-table-column>

					<el-table-column prop="startLegend" label="开始里程" width="110" align="right">
					</el-table-column>
					<el-table-column prop="stopLegend" label="结束里程" width="110" align="right">
					</el-table-column>
					<el-table-column prop="runMile" label="行驶里程" width="110" align="right">
					</el-table-column>
					<el-table-column prop="avgMile" label="平均保养里程" width="120" align="right">
					</el-table-column>
					<el-table-column prop="exsuranceCompanyName" label="延保类型" width="100">
					</el-table-column>
					<!--<el-table-column label="操作"
																							                 width="80"
																							                 fixed="right">
																								<template scope="scope">
																									<el-tooltip class="item"
																									            effect="light"
																									            content="编辑"
																									            placement="top">
																										<el-button type="primary"
																										           size="mini"
																										           class="iconfont icon-dingdan"
																										           @click.native.prevent="msgEdit(scope.$index)"></el-button>
																									</el-tooltip>
																								</template>
																							</el-table-column>-->
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		</el-col>
		</el-row>
		<el-dialog title="新增延保单" v-model="FormDataShow">
			<el-form :model="FormData" ref="exForm" :rules="exRule" label-width="100px">

				<el-form-item label="客户VIN:" prop="vin" required>
					<el-input size="small" v-model="FormData.vin" icon="more" @click="openVin" :disabled="vindis">
					</el-input>
				</el-form-item>

				<el-form-item label="电话:" prop="ownerPhone">
					<el-input size="small" v-model="FormData.ownerPhone">
					</el-input>
				</el-form-item>

				<el-form-item label="联系人:" prop="ownerName">
					<el-input size="small" v-model="FormData.ownerName">
					</el-input>
				</el-form-item>

				<el-form-item label="延保期限:" prop="reTime">
					<el-select size="small" v-model="FormData.reTime" placeholder="请选择" @change="reTimeChange">
						<el-option v-for="item in reTimeCombo" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="延保起始:" prop="restartInsurance">
					<el-date-picker size="small" @change="changetime" v-model="FormData.restartInsurance" format="yyyy-MM-dd" :editable=false type="date" placeholder="选择日期">
					</el-date-picker>
				</el-form-item>

				<el-form-item label="延保结束:" prop="restopInsurance">
					<el-date-picker size="small" v-model="FormData.restopInsurance" format="yyyy-MM-dd" :editable=false type="date" placeholder="选择日期" readonly>
					</el-date-picker>
				</el-form-item>

				<el-form-item label="开始里程:" prop="startLegend">
					<el-input-number v-model="FormData.startLegend" :step="1000" :min="10000"></el-input-number>
					<!--<el-input size="small"
												          placeholder="请输入内容"
												          v-model="FormData.startLegend">
												</el-input>-->
				</el-form-item>

				<el-form-item label="截止里程:" prop="stopLegend">
					<el-input-number v-model="FormData.stopLegend" :step="1000" :min="10000"></el-input-number>
					<!--<el-input size="small"
												          placeholder="请输入内容"
												          v-model="FormData.stopLegend">
												</el-input>-->
				</el-form-item>

				<el-form-item label="延保类型:" prop="exsuranceCompanyName">
					<!--<el-input size="small" placeholder="请输入内容" v-model="FormData.type">
																																																																																			</el-input>-->
					<el-select size="small" v-model="FormData.exsuranceCompanyName" placeholder="请选择">
						<el-option v-for="item in typeCombo" :label="item.label" :value="item.value"></el-option>

					</el-select>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="saveEx">提 交</el-button>
				<!--<el-button type="primary" @click="add">重 置</el-button>-->
			</div>
		</el-dialog>

		<!-- 弹出车辆选择-->
		<el-dialog title="选择车辆" v-model="carVinShow" size="small">
			<el-row :gutter="24">
				<el-col :span="6">
					<el-input size="small" v-model="vinPar" placeholder="请输入条件" style="width:120!important"></el-input>
				</el-col>
				<el-col :span="18">
					<el-button type="primary" size="small" v-on:click='vinQuery'>查 询</el-button>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-table :data="vinData.dataList" stripe border @row-click='vinRowClick'>
						<el-table-column type="index" label="序号" width="70">
						</el-table-column>
						<el-table-column prop="vin" label="vin" width="240">
						</el-table-column>
						<el-table-column prop="plateNum" label="车牌号" width="180">
						</el-table-column>
						<el-table-column prop="contactName" label="用户" width="180">
						</el-table-column>
						<el-table-column prop="contactPhone" label="电话">
						</el-table-column>
					</el-table>
					<el-pagination small @current-change="carVinPageChange" :current-page="carVinPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="vinData.total">
					</el-pagination>
				</el-col>
			</el-row>
			<div slot="footer" class="dialog-footer">
				<el-button @click="carVinShow = false">取 消</el-button>
				<!--<el-button type="primary" @click="saveRes">提 交</el-button>-->
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import moment from 'moment'
	export default {
		data: function() {
			return {
				//查询条件
				area: '',
				brand: '',
				companyId: '',
				areaCombo: [],
				brandCombo: [],
				companyCombo: [],
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				//查询条件
				condition: "",
				//查询条件车系
				seriesComboData: [],
				//分组数据
				tableData: {
					total: 0,
					dataList: []
				},
				vindis: false,
				//vin数据
				vinData: {
					total: 0,
					dataList: []
				},
				//类型下拉数据
				reTimeCombo: [{
					label: '一年',
					value: '1'
				}, {
					label: '两年',
					value: '2'
				}, {
					label: '三年',
					value: '3'
				}, {
					label: '四年',
					value: '4'
				}],
				//延保类型
				typeCombo: [],
				//车龄
				carAgeCombo: [],
				//状态
				statusComboData: [{
					label: '一月内到期',
					value: '1'
				}, {
					label: '二月内到期',
					value: '2'
				}, {
					label: '三月内到期',
					value: '3'
				}, {
					label: '在质保',
					value: '4'
				}, {
					label: '在延保',
					value: '5'
				}, {
					label: '已过期',
					value: '6'
				}],
				//查询条件的对象
				condition: {
					area: '',
					brand: '',
					companyId: '',
					select: {
						key: "1",
						value: "",
					},
					series: [],
					carAge: [],
					status: "",
					type: "",
					time: {
						startTime: "",
						stopTime: ""
					}
				},
				//userTel
				userTel: "",
				//vin查询条件
				vinPar: '',
				//字典转换值
				deptConvertData: {},
				//短信名称转换值
				typeConvertData: {},
				//显示选择车辆的界面
				carVinShow: false,
				//新增表单显示
				FormDataShow: false,
				//创建编辑表单
				exFormShow: false,
				//短信名称是否可编辑
				msgNameEdit: false,
				//业务系统字典
				moduleCombo: [],
				//表单初始值
				emptyData: {
					id: '',
					vin: '',
					//userTel: '',
					ownerName: '',
					ownerPhone: '',
					reTime: '',
					restartInsurance: '',
					restopInsurance: '',
					startLegend: '',
					stopLegend: '',
					exsuranceCompanyName: '',
					status: '1',
					createTime: 0,
					createUser: '',
					updateTime: 0,
					updateUser: '',
				},
				//表单数据
				FormData: {
					id: '',
					vin: '',
					//userTel: '',
					ownerName: '',
					ownerPhone: '',
					reTime: '',
					restartInsurance: '',
					restopInsurance: '',
					startLegend: '',
					stopLegend: '',
					exsuranceCompanyName: '',
					status: '1',
					createTime: 0,
					createUser: '',
					updateTime: 0,
					updateUser: '',
				},
				/*********新增延保单验证规则****************/
				exRule: {
					vin: [{
						required: true,
						message: '请选择车辆',
						trigger: 'blur'
					}],
					ownerName: [{
						required: true,
						message: '请选择车辆或输入车主',
						trigger: 'blur'
					}],
					restartInsurance: [{
						type: 'date',
						required: true,
						message: '请选择延期保开始日期',
						trigger: 'change'
					}],
					restopInsurance: [{
						type: 'date',
						required: true,
						message: '请选择延期保结束日期',
						trigger: 'change'
					}],
					// reTime: [{
					// 	required: true,
					// 	message: '请选择延期期限',
					// 	trigger: 'change'
					// }],
					//				startLegend: [{
					//					required: true,
					//					message: '请输入开始里程',
					//					trigger: 'blur'
					//				}],
					//				stopLegend: [{
					//					required: true,
					//					message: '请输入结束里程',
					//					trigger: 'blur'
					//				}],
					exsuranceCompanyName: [{
						required: true,
						message: '请选择延保类型',
						trigger: 'blur'
					}],

				},
				// 弹出车辆选择
				carVinPage: 1,
				multipleSelection: [],

			}
		},

		methods: {
			//选择框
			handleSelectionChange: function(val) {
				debugger;
				this.$data.multipleSelection = val;
				if(this.$data.multipleSelection.length > 1)
					this.$message.error("请选择一条数据！");
			},
			//新增按钮
			exInsuranceAdd: function() {
				this.$data.FormData = Object.assign(this.$data.FormData, this.$data.emptyData);
				this.$data.FormDataShow = true;
			},

			//双击表格查询详情信息
			dbClick: function(row) {
				this.$data.curEntityId = row.id;
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/exsurance/info', //url
					params: { //发送的参数
						id: this.$data.curEntityId
					}
				}).then(resp => {
					if(resp.data.success) {
						//debugger;
						this.$message(resp.data.msg);

						resp.data.data.restartInsurance = new Date(resp.data.data.restartInsurance);
						resp.data.data.restopInsurance = new Date(resp.data.data.restopInsurance);
						//this.$data.vindis=true;
						debugger;
						this.$data.FormData = Object.assign(this.$data.FormData, resp.data.data);
						//this.exInsuranceQuery();
					} else {
						this.$message.error(resp.data.msg);
					}
				}, resp => {

				});
			},
			//查询
			exInsuranceQuery: function() {
				if(this.$data.condition.time.startTime) {
					this.$data.condition.time.startTime = this.moment(this.$data.condition.time.startTime).format("YYYY-MM-DD");
				}
				if(this.$data.condition.time.stopTime) {
					this.$data.condition.time.stopTime = this.moment(this.$data.condition.time.stopTime).format("YYYY-MM-DD");

				}
				if(this.$data.companyId == "") {
					this.$message.error("请选择公司！");
				} else {
					this.$data.condition.area = this.$data.area;
					this.$data.condition.brand = this.$data.brand;
					this.$data.condition.companyId = this.$data.companyId;

					this.$http.post(this.API_ROOT + '/crm/exsurance/page', this.$data.condition, {
							params: {
								start: this.$data.CurentPage,
								limit: this.page.pageSize
							}
						})
						.then(resp => {
							if(resp.data.success) {
								debugger;
								//this.$message(resp.data.msg);
								resp.data.total = parseInt(resp.data.total);
								// es5写法
								this.$data.tableData = resp.data;
								//this.exInsuranceQuery(this.$data.curTreeDeptId);
								//this.$data.exFormShow = false;
							} else {
								debugger;
								this.$message.error(resp.data.msg);
							}
						}, resp => {

						});
				}
			},
			//查询车辆选择
			vinQuery: function() {
				//debugger;
				this.$http({
					method: 'GET',
					url: this.API_ROOT + '/crm/exsurance/pageOwner', //url
					params: { //发送的参数
						contactName: this.$data.vinPar, //参数
						start: this.$data.carVinPage, //页码
						limit: this.$data.page.pageSize //每页的数量
					}
				}).then(function(resp) {
					debugger;
					resp.data.total = parseInt(resp.data.total);
					// es5写法
					this.$data.vinData = resp.data;

				}, function(error) {
					// error
				})
			},
			//车系行被点击
			vinRowClick: function(row) {
				debugger;
				this.$data.FormData.ownerName = row.contactName;
				this.$data.FormData.ownerPhone = row.contactPhone;
				this.$data.FormData.vin = row.vin;
				this.$data.FormData.carSeries = row.series;
				this.$data.carVinShow = false;
			},

			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				//this.$data.dictGroup = '';
				this.exInsuranceQuery();
			},
			//打开车辆选择
			openVin: function() {
				this.vinQuery();
				this.$data.carVinShow = true;
			},
			//新增资源角色
			Add: function() {
				//清空数据
				debugger;
				this.$data.msgNameEdit = false;
				this.$data.FormData = Object.assign(this.$data.FormData, this.$data.emptyData);
				this.$data.exFormShow = true;
			},
			//编辑角色
			msgEdit: function(index) {
				//修改可编辑属性
				if(this.$data.multipleSelection.length == 1) {
					this.$data.msgNameEdit = true;
					var resRoleData = this.$data.multipleSelection[0];
					this.$http.get(this.API_ROOT + '/crm/exsurance/info', {
						params: {
							id: resRoleData.id
						}
					}).then((response) => {
						debugger;
						response.data.data.restartInsurance = new Date(response.data.data.restartInsurance);
						response.data.data.restopInsurance = new Date(response.data.data.restopInsurance);
						this.$data.FormData = Object.assign(this.$data.FormData, response.data.data);
						this.$data.FormDataShow = true;
					}, (response) => {
						// error callback
					});
				} else {
					this.$message.error("请选择一条数据！");
				}

			},

			/***********保存延保记录**************/
			saveEx: function() {

				this.$refs.exForm.validate(function(valid) {
					if(valid) {
						debugger;
						var dateStart = this.$data.FormData.restartInsurance;
						if(dateStart == null) {
							this.$data.FormData.restartInsurance = null;
						} else {
							//转换成long型
							this.$data.FormData.restartInsurance = new Date(dateStart).getTime();
						};
						var dateStop = this.$data.FormData.restopInsurance;
						if(dateStop == null) {
							this.$data.FormData.restopInsurance = null;
						} else {
							this.$data.FormData.restopInsurance = new Date(dateStop).getTime();
						};

						this.$http.post(this.API_ROOT + '/crm/exsurance/save', this.$data.FormData)
							.then(resp => {
								debugger;
								if(resp.data.success) {
									this.$message(resp.data.msg);
									this.$data.FormData = Object.assign(this.$data.FormData, this.$data
										.emptyData)
									this.$data.userTel = "";
									this.exInsuranceQuery(this.$data.curTreeDeptId);
									this.$data.FormDataShow = false;

									//this.$data.exFormShow = false;
								} else {
									this.$message.error(resp.data.msg);
								}
							}, resp => {

							});

						this.$data.FormData.restartInsurance = new Date(this.$data.FormData.restartInsurance);
						this.$data.FormData.restopInsurance = new Date(this.$data.FormData.restopInsurance);

					}
					return false;
				}.bind(this));
			},
			queryDeptCovert: function() {

				this.$http.get(this.API_ROOT + '/rbac/dept/convert', {
					params: {
						root: "0",
						type: ""
					}
				}).then((response) => {

					this.$data.deptConvertData = response.data;

				}, (response) => {});
			},
			msgTypeDeptCovert: function() {

				this.$http.get(this.API_ROOT + '/base/dict/convert', {
					params: {
						group: "exInsuranceType"
					}
				}).then((response) => {

					this.$data.typeConvertData = response.data;

				}, (response) => {});
			},
			formatStartTime: function(row) {
				if(row.restartInsurance) {
					return this.moment(row.restartInsurance).format("YYYY-MM-DD")
				}
				return '';
			},
			formatEndTime: function(row) {
				if(row.restopInsurance) {
					return this.moment(row.restopInsurance).format("YYYY-MM-DD")
				}
				return '';
			},
			/*********弹出框车辆分页*********/
			carVinPageChange: function(page) {
				debugger;
				this.$data.carVinPage = page;
				this.vinQuery();
			},
			/*************计算日期**************/
			reTimeChange: function(date) {
				if(this.$data.FormData.restartInsurance) {
					this.$data.FormData.restopInsurance = new Date(this.moment(this.$data.FormData.restartInsurance).add(date, "years").add(-1, 'days'));
				}
			},
			/*************开始时间变化后，刷新结束时间**************/
			changetime: function(datess) {
				if(datess != undefined) {
					if(this.$data.FormData.reTime) {
						this.$data.FormData.restopInsurance = new Date(this.moment(datess).add(this.$data.FormData.reTime, "years").add(-1, 'days'));
					}

				}
			},
			//获取公司信息
			getCompanyInfo: function() {
				//this.$data.data.companyId = ""; //清空单位
				this.$data.companyId = ""; //清空单位
				this.$data.companyCombo = [];
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/all", {
					params: {
						area: this.$data.area,
						brand: this.$data.brand
					}
				}).then(resp => {
					this.$data.companyCombo = resp.data.dataList;
					if(this.$data.companyCombo.length>0){
						this.$data.companyId = this.$data.companyCombo[0].id;
					}
				});
			},
			//获取区域
			getarea: function() {

				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/area/all", {
					params: {

					}
				}).then(resp => {
					this.$data.areaCombo = resp.data.dataList;
				});
			},
			//获取品牌
			getBrand: function() {
				debugger;
				this.$http.get(this.API_ROOT + "/rbac/dept/brand/all", {
					params: {}
				}).then(resp => {
					this.$data.brandCombo = resp.data.dataList;
				});
			},
			changCompany: function() {
				this.$data.condition.series = [];
				this.$data.seriesComboData = [];
				this.getSeries();

			},

			getSeries: function() {
				//加车系
				this.$http.get(this.API_ROOT + '/base/car/combo', {
					params: {
						companyId: this.$data.companyId
					}
				}).then((response) => {
					// success callback
					this.$data.seriesComboData = response.data;
				}, (response) => {
					// error callback
				});
			}

		},
		//表单创建时执行
		created: function() {
			this.getarea();
			this.getBrand();
			this.getCompanyInfo();

			//延保类型
			this.$http.get(this.API_ROOT + '/base/dict/combo', {
				params: {
					group: "020102"
				}
			}).then((response) => {
				// success callback
				this.$data.typeCombo = response.data;
			}, (response) => {
				// error callback
			});
			//车龄
			this.$http.get(this.API_ROOT + '/base/dict/combo', {
				params: {
					group: "02030101"
				}
			}).then((response) => {
				// success callback
				this.$data.carAgeCombo = response.data;
			}, (response) => {
				// error callback
			});
			this.getSeries();

		}
	}
</script>
<style>

</style>